<template>
  <div class="table">
    <!-- 搜索栏 -->
    <div class="searchBox">
      <span>交易时间段</span>
      <!-- 时间选择输入框 -->
      <div class="block">
        <el-date-picker
          v-model="value1"
          type="daterange"
          value-format="yyyy-MM-dd"
          range-separator="~"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </div>

      <!-- 输入框 -->
      <div class="inputBox">
        <el-input placeholder="请输入姓名查询" v-model="input" clearable>
        </el-input>
      </div>

      <!-- 还原按钮 -->
      <div class="buttonSearch" @click="restoreSearch">
        <el-button type="primary" icon="">还原</el-button>
      </div>

      <!-- 搜索按钮 -->
      <div class="buttonSearch" @click="getSearch">
        <el-button type="primary" icon="el-icon-search">搜索</el-button>
      </div>
    </div>

    <!-- 表格数据 -->
    <div class="tableBox">
      <el-table :data="data2" style="width: 100%">
        <el-table-column
          prop="tradingTime"
          label="交易日期"
          align="center"
          header-align="center"
        />

        <el-table-column
          prop="name"
          label="姓名"
          align="center"
          header-align="center"
        />

        <el-table-column
          prop="operateType"
          label="操作类型"
          align="center"
          header-align="center"
        />

        <el-table-column
          prop="money"
          label="金额(元)"
          align="center"
          header-align="center"
        />

        <el-table-column
          prop="payment"
          label="支付方式"
          align="center"
          header-align="center"
        />

        <el-table-column
          prop="account"
          label="账号"
          align="center"
          header-align="center"
        />

        <el-table-column
          prop="withdrawStatus"
          label="提现状态"
          align="center"
          header-align="center"
        />

        <el-table-column
          prop="operate"
          label="操作"
          align="center"
          header-align="center"
        >
          <template slot-scope="scope">
            <el-button
              style="width: auto !important"
              type="text"
              @click="showEditDialog(scope.row)"
              >审核并转账</el-button
            >
            <el-button
              style="width: auto !important;color: #FB9678;"
              type="text"
              @click="showdelete(scope.row)"
              >拒绝</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页 -->
    <!-- 
    page-size 每页个数 
    total 数据总数
    current-page 当前页数
    -->
    <div style="text-align: right;margin-top: 20px;">
      <el-pagination
      background
      layout="prev, pager, next"
      :page-size="pageSize"
      :current-page="currentPage"
      hide-on-single-page
      @current-change="changePage"
      :total="this.data1.length"
      style="margin-top: 20px"
    >
    </el-pagination>
    </div>

    <!-- 审核弹出框 -->
    <el-dialog
      title="账单详情"
      :visible.sync="editDialogVisibleHDs"
      width="40%"
      :before-close="handleClose"
      @close="editDialogVisibleHD"
      class="modificationFrame"
    >
      <div class="information"><span>订单信息:</span></div>
      <div class="informations">
        <el-row>
          <el-col :span="5"><span>交易日期:</span></el-col>
          <el-col :span="19"
            ><span>{{ ttg.tradingTime }}</span></el-col
          >
        </el-row>
      </div>
      <div class="informations">
        <el-row>
          <el-col :span="5"><span>姓名:</span></el-col>
          <el-col :span="19"
            ><span>{{ ttg.name }}</span></el-col
          >
        </el-row>
      </div>

      <div class="informations">
        <el-row>
          <el-col :span="5"><span>操作类型:</span></el-col>
          <el-col :span="19"
            ><span>{{ ttg.operateType }}</span></el-col
          >
        </el-row>
      </div>
      <div class="informations">
        <el-row>
          <el-col :span="5"><span>金额(元):</span></el-col>
          <el-col :span="19"
            ><span>{{ ttg.money }}</span></el-col
          >
        </el-row>
      </div>
      <div class="informations">
        <el-row>
          <el-col :span="5"><span>支付方式:</span></el-col>
          <el-col :span="19"
            ><span>{{ ttg.Payment }}</span></el-col
          >
        </el-row>
      </div>
      <div class="informations">
        <el-row>
          <el-col :span="5"><span>账号:</span></el-col>
          <el-col :span="19"
            ><span>{{ ttg.account }}</span></el-col
          >
        </el-row>
      </div>

      <div class="informations">
        <el-row>
          <el-col :span="5"><span>提现状态:</span></el-col>
          <el-col :span="19"
            ><span>{{ ttg.withdrawStatus }}</span></el-col
          >
        </el-row>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="pass">通过</el-button>
        <el-button type="primary" @click="modification">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// import { Interactive_request } from "../../views/zhs/api/WithdrawalAudit/index";
export default {
  data() {
    return {
      value: "",
      editDialogVisibleHDs: false,
      input: "",
      data1: [],
      data2: [],
      value1: [],
      input: "",
      pageSize: 7,
      currentPage: 1,
      pagenumber: this.pageNow,
      ttg: {
        tradingTime: "",
        houseName: "",
        name: "",
        phone: "",
        money: null,
        Payment: null,
      },
      editDialogVisible: false,
      houseName: "",
      name: "",
      phone: "",
      payment: "",
      money: "",
      withdrawStatus: "",
      id: "",
    };
  },
  methods: {
    getSearch() {},
    editDialogVisibleHD() {},

    //拒绝按钮
    showdelete(row) {
      // console.log(row);
      const showdeletedata =
        "http://1.117.147.176:8080/yakeikea/withdrawReview/delete";
      this.$axios
        .get(showdeletedata, {
          params: {
            id: row.id,
          },
          headers: {
            "Content-Type": "application/x-www-form-urlencoded",
            token: sessionStorage.getItem("token"),
          },
        })
        .then((res) => {
          this.req();
        });
    },

    //审核通过按钮
    pass() {
      const update = "http://1.117.147.176:8080/yakeikea/withdrawReview/update";
      const data = {
        id: this.ttg.id,
        withdrawStatus: 3,
      };
      this.$axios
        .post(update, data, {
          headers: {
            "Content-Type": "application/json",
            token: sessionStorage.getItem("token"),
          },
        })
        .then((res) => {
          this.editDialogVisibleHDs = !this.editDialogVisibleHDs;
        });
    },
    //还原功能
    restoreSearch() {
      this.req();
      this.value1 = "";
      this.input = "";
    },

    //搜索功能
    getSearch() {
      let tradingTimeStarted = this.value1[0]; //起始时间
      let tradingTimeEnd = this.value1[1]; //结束时间
      let name = this.input;
      let phone = this.input;
      let houseName = this.input;
      if (this.value1.length === 0 && this.input.length === 0) {
        return;
      } else {
        this.currentPage = 1; //搜索时，页码固定等于1
      }
      const search_connector =
        "http://1.117.147.176:8080/yakeikea/withdrawReview/list";
      let that = this;
      that.$axios
        .get(search_connector, {
          params: {
            tradingTimeStarted: tradingTimeStarted,
            tradingTimeEnd: tradingTimeEnd,
            name: name,
          },
          headers: {
            "Content-Type": "application/x-www-form-urlencoded",
            token: sessionStorage.getItem("token"),
          },
        })
        .then(function (res) {
          // console.log(res);
          if (res.data.length === 0) {
            that.$axios
              .get(search_connector, {
                params: {
                  tradingTimeStarted: tradingTimeStarted,
                  tradingTimeEnd: tradingTimeEnd,
                  phone: phone,
                },
                headers: {
                  "Content-Type": "application/x-www-form-urlencoded",
                  token: sessionStorage.getItem("token"),
                },
              })
              .then(function (rea) {
                if (rea.data.length === 0) {
                  that.$axios
                    .get(search_connector, {
                      params: {
                        tradingTimeStarted: tradingTimeStarted,
                        tradingTimeEnd: tradingTimeEnd,
                        houseName: houseName,
                      },
                      headers: {
                        "Content-Type": "application/x-www-form-urlencoded",
                        token: sessionStorage.getItem("token"),
                      },
                    })
                    .then(function (reb) {
                      if (reb.data.length === 0) {
                        that.data2 = [];
                        return that.data2;
                      } else {
                        that.data1 = reb.data;
                        that.data2 = that.data1.slice(
                          that.pageSize * that.currentPage - that.pageSize,
                          that.pageSize * that.currentPage
                        );
                        that.data2.forEach((element) => {
                          element.tradingTime = new Date(element.tradingTime);
                          element.tradingTime = that.formatDate(
                            element.tradingTime
                          );
                          return element.tradingTime;
                        });
                        that.value1 = "";
                        that.input = "";
                      }
                    });
                } else {
                  that.data1 = rea.data;
                  that.data2 = that.data1.slice(
                    that.pageSize * that.currentPage - that.pageSize,
                    that.pageSize * that.currentPage
                  );
                  that.data2.forEach((element) => {
                    element.tradingTime = new Date(element.tradingTime);
                    element.tradingTime = that.formatDate(element.tradingTime);
                    return element.tradingTime;
                  });
                  that.value1 = "";
                  that.input = "";
                }
              });
          } else {
            that.data1 = res.data;
            that.data2 = that.data1.slice(
              that.pageSize * that.currentPage - that.pageSize,
              that.pageSize * that.currentPage
            );
            that.data2.forEach((element) => {
              element.tradingTime = new Date(element.tradingTime);
              element.tradingTime = that.formatDate(element.tradingTime);
              return element.tradingTime;
            });
            that.value1 = "";
            that.input = "";
          }
        });
    },

    //修改框确认按钮
    modification() {
      this.editDialogVisibleHDs = !this.editDialogVisibleHDs;
    },

    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },

    //审核转账弹框
    showEditDialog(row) {
      this.editDialogVisibleHDs = true;
      this.ttg.id = row.id; //数据ID
      this.ttg.tradingTime = row.tradingTime; //交易日期
      this.ttg.name = row.name; //姓名
      this.ttg.operateType = row.operateType; //操作类型
      this.ttg.money = row.money; //金额
      this.ttg.Payment = row.payment; //支付方式
      this.ttg.account = row.account; //账号
      this.ttg.withdrawStatus = row.withdrawStatus; //提现状态
    },

    //分页功能实现
    changePage(pageNow) {
      this.currentPage = pageNow;
      this.data2 = this.data1.slice(
        this.pageSize * this.currentPage - this.pageSize,
        this.pageSize * this.currentPage
      );
      this.data2.forEach((element) => {
        element.tradingTime = new Date(element.tradingTime);
        element.tradingTime = this.formatDate(element.tradingTime);
        return element.tradingTime;
      });
      return pageNow;
    },

    //时间戳转换时间格式
    formatDate(now) {
      var year = now.getFullYear(); //取得4位数的年份
      var month = now.getMonth() + 1; //取得日期中的月份，其中0表示1月，11表示12月
      var date = now.getDate(); //返回日期月份中的天数（1到31）
      var hour = now.getHours(); //返回日期中的小时数（0到23）
      var minute = now.getMinutes(); //返回日期中的分钟数（0到59）
      var second = now.getSeconds(); //返回日期中的秒数（0到59）
      return (
        year +
        "-" +
        month +
        "-" +
        date +
        " " +
        hour +
        ":" +
        minute +
        ":" +
        second
      );
    },

    //数据请求
    async req() {
      const Request_address =
        "http://1.117.147.176:8080/yakeikea/withdrawReview/list";
      await this.$axios
        .get(Request_address, {
          params: {
            page: 1,
            limit: 100,
          },
          headers: {
            "Content-Type": "application/x-www-form-urlencoded",
            token: sessionStorage.getItem("token"),
          },
        })
        .then((res) => {
          this.data1 = res.data;
          this.data2 = this.data1.slice(
            this.pageSize * this.currentPage - this.pageSize,
            this.pageSize * this.currentPage
          );
          this.data2.forEach((element) => {
            element.tradingTime = new Date(element.tradingTime);
            element.tradingTime = this.formatDate(element.tradingTime);
            return element.tradingTime;
          });
        });
    },
  },
  created() {
    this.req();
  },
};
</script>

<style scoped>
.table {
  width: 100%;
  /* margin-top: 50px; */
  /* margin-left: 5%; */
}
.searchBox {
  width: 100%;
  height: 50px;
  line-height: 50px;
  background-color: #f4f6f5;
  padding: 0 20px;
  color: rgb(51, 51, 51);
  /* border: 1px solid red; */
}
.searchBox > span {
  /* font-size: 1.6rem; */
  display: block;
  width: 100px;
  height: 50px;
  line-height: 50px;
  float: left;
  text-align: center;
}
.block {
  width: 350px !important;
  height: 50px;
  line-height: 50px;
  float: left;
  padding-left: 0 !important;
  margin-left: 20px;
  /* margin-right: 20px; */
}
.inputBox {
  width: 300px !important;
  height: 50px;
  line-height: 50px;
  margin-left: 20px;
  padding-left: 0;
  float: left;
}
.buttonSearch {
  width: 89px;
  height: 50px;
  float: left;
  padding-left: 0;
  line-height: 50px;
  margin-left: 20px;
}

.box-card {
  background-color: rgb(249, 249, 249);
}
.box-card input {
  width: 200px;
  height: 30px;
  border: 0;
  outline: none;
}

.box-card select {
  width: 70px;
  height: 30px;
  text-align: center;
  border: 0;
  outline: none;
  -webkit-appearance: none;
}

.clearfix {
  width: 100%;
  height: 50px;
  line-height: 50px;
  color: black;
  font-size: 2rem;
  font-weight: 700;
}
.orderInformation {
  height: 90px;
  line-height: 30px;
  margin-bottom: 20px;
}
.information {
  height: 50px;
  line-height: 50px;
}
.information > span {
  border-left: 3px solid rgb(16, 142, 233);
}
.modificationFrame span {
  font-size: 16px;
}
.modificationFrame input {
  height: 30px;
  width: 50%;
}
.informations {
  margin-top: 20px;
}
</style>